{% extends 'temp.html' %}

{% load static %}
{% block type %}
    <script src="{% static 'js/echarts.min.js' %}"></script>
    <style>
        {##ste{#}
        {#    position: absolute;#}
        {#    top:-415px;#}

    </style>
    <div class="bs-example" data-example-id="bordered-table">
        <div class="panel panel-default">
            <a class="btn btn-success" href="/deantUser/add/" target="_blank" style="margin: 10px 10px;">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建员工列表
            </a>
            <div style="float:right;width:300px;margin: 10px 10px;">
                <form method="get">
                    <div class="input-group">
                        <input type="text" name="t" class="form-control" placeholder="搜索员工姓名" value="{{ seach_list }}">
                        <span class="input-group-btn">
                                        <button class="btn btn-default" type="submit">
                                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                        </button>
                                     </span>
                    </div>
                </form>
            </div>
            <div class="panel-heading">
                <h3>薪资列表</h3>
            </div>
            <table class="table table-bordered">
                <thead>
                <tr class="info">
                    <th>ID</th>
                    <th>员工名称</th>
                    <th>手机号码</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>身份证号码</th>
                    <th>员工薪资</th>
                    <th>入职时间</th>
                    <th>离职时间</th>
                    <th>部门</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for i in dest %}
                    <tr>
                        <th scope="row">{{ i.id }}</th>
                        <td class="div1">{{ i.name }}</td>
                        <td>{{ i.modlie }}</td>
                        <td>{{ i.age }}</td>
                        <td>{{ i.get_sex_display }}</td>
                        <td>{{ i.shenfen }}</td>
                        <td class="div2">{{ i.account_s }}</td>
                        <td>{{ i.Detime|date:'Y-m-d' }}</td>
                        <td>{{ i.Retime|date:'Y-m-d' }}</td>
                        <td>{{ i.deant.title }}</td>
                        <td>
                            <a class="btn-primary btn-xs" href="http://127.0.0.1:8000/deantUser/{{ i.id }}/edit/">编辑</a>
                            <a class="btn-danger btn-xs" href="http://127.0.0.1:8000/deantUser/delete/?sid={{ i.id }}">删除</a>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
     <div id="main" style="width:600px;height: 400px;margin:10px 10px;"></div>
     <div id="ste" style="width:600px;height: 400px;margin:10px 20px;float:right;top:-415px;left:-50px;"></div>
    <script>
        var mychart = echarts.init(document.getElementById('main'));

        {#指定图表的配置项#}
        data_list = []
        data_price = []
        {% for t in dest %}
            data_list.push('{{ t.name }}')
            data_price.push({{ t.account_s }})
            console.log(data_list)
            var option = {
                title: {
                    text: '员工薪资表'
                },
                tooltip: {},
                legend: {
                    data: ['薪资']
                },
                xAxis: {
                    data: data_list
                },
                yAxis: {},
                series: [{
                    name: '薪资',
                    type: 'bar',
                    data: data_price
                }],
                color: ['#6bff02']
            };
            mychart.setOption(option);
        {% endfor %}

    </script>
    <script>
        var myset = echarts.init(document.getElementById('ste'));
        data_s = []
        data_t = []
        {% for s in dest %}
            data_s.push('{{ s.name }}')
            data_t.push({{ s.account_s }})
            var option = {
                title: {
                    text: '员工薪资表'
                },
                tooltip: {},
                legend: {
                    data: ['薪资']
                },
                xAxis: {
                    data: data_s
                },
                yAxis: {},
                series: [{
                    name: '薪资',
                    type: 'line',
                    data: data_t
                }]

            };
            myset.setOption(option);
        {% endfor %}
    </script>
    <ul class="pagination" style="position: relative;top: -10px;left: 30%;">
        {{ page_string }}
    </ul>
{% endblock %}